<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-gray">
			<block slot="backText">返回</block>
			<block slot="content">用户信息</block>
		</cu-custom>
		<form>
			<view class="cu-form-group-top margin-top">
				<view class="title"><text class="required">*</text>姓名</view>
				<input placeholder="请输入姓名" v-model="formData.real_name" />
			</view>
			<view class="cu-form-group-top">
				<view class="title"><text class="required">*</text>手机号</view>
				<input placeholder="请输入手机号" v-model="formData.mobile" />
			</view>
			<view class="cu-form-group-top">
				<view class="title"><text class="required">*</text>身份证</view>
				<input placeholder="请输入身份证" v-model="formData.id_card" />
			</view>
			<view class="cu-form-group-top">
				<view class="title">现居地址</view>
				<QnSelect @change="handleCardAddress" :data="userData"></QnSelect>
			</view>
			<view class="cu-form-group-top">
				<view class="title">现居详细地址</view>
				<input placeholder="请输入详细地址" v-model="formData.live_address" />
			</view>
			<view class="padding">
				<QnCheckbox v-model="formData.face_option"><text class="padding">开启快速通道</text></QnCheckbox>
			</view>
			<view class="padding"><button class="cu-btn block bg-blue margin-tb-sm lg"
					@click="handleSubmit">保存个人信息</button></view>
		</form>
	</view>
</template>

<script>
	import {
		setUserInfo
	} from '@/api/user.js';
	import QnCheckbox from '@/components/checkbox.vue';
	import QnSelect from '@/components/select/index.vue';
	export default {
		components: {
			QnCheckbox,
			QnSelect
		},
		data() {
			return {
				formData: {
					real_name: '',
					mobile: '',
					id_card: '',
					live_province: '',
					live_city: '',
					live_area: '',
					live_street: '',
					live_address: '',
					faceOption: true
				}
			};
		},

		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			},
			userData() {
				return {
					pCode: this.formData.live_province,
					cCode: this.formData.live_city,
					aCode: this.formData.live_area,
					sCode: this.formData.live_street,
					pName: this.formData.live_province_name,
					cName: this.formData.live_city_name,
					aName: this.formData.live_area_name,
					sName: this.formData.live_street_name
				};
			}
		},
		onShow() {
			setTimeout(() => {
				this.formData = this.$store.state.userInfo;
				console.log("this.formData ", this.formData)
			}, 1500);
		},
		methods: {
			handleCardAddress(res) {
				this.formData.live_province = res.province;
				this.formData.live_city = res.city;
				this.formData.live_area = res.area;
				this.formData.live_street = res.street;
				this.formData.live_province_name = res.provinceName;
				this.formData.live_city_name = res.cityName;
				this.formData.live_area_name = res.areaName;
				this.formData.live_street_name = res.streetName;
			},
			handleSubmit() {
				setUserInfo(this.formData).then(response => {
					const {
						data
					} = response;
					uni.showToast({
						title: '认证成功',
						duration: 2000
					});
					uni.switchTab({
						url: '/pages/my/my'
					});
				});
			}
		}
	};
</script>

<style>
	.required {
		color: red;
		padding-right: 10rpx;
	}
</style>
